<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<script type="text/javascript">
var roleDataGrid = $('#role-datagrid-json').datagrid({
    gridTitle : '角色管理',
    showLinenumber: false,
    showToolbar: true,
    filterThead: false,
    filterAll: true,
    sortAll : true,
    dataUrl: 'role/list.do',
    dataType: 'json',
    columns: [
    	{
			name: '',
			label: '操作',
			align: 'center',
			width: 220,
			quicksort:false,
			menu: false,
			edit: false,
			render: function(value){
		        var html = '';
		    	html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue btn-sm" onclick="setPermission(this);"><i class="fa fa-edit"></i> 设置权限</button></div>';
		    	html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue btn-sm" onclick="editRole(this)"><i class="fa fa-edit"></i> 编辑</button></div>';
			    html += '<div class="btn-group" role="group"><button type="button" class="btn btn-red btn-sm" onclick="delRole(this)"><i class="fa fa-remove"></i> 删除</button></div>';
			    return html;
			}
        },
        {
            name: 'roleName',
            label: '角色名称',
            align: 'center',
            width: 200
        },
        {
            name: 'priority',
            label: '优先级',
            align: 'center',
            type : 'spinner',
            width: 100
        },
        {
            name: 'mark',
            label: '描述',
            align: 'center',
            width: 300
        }
    ],
    paging: {pageSize:20, selectPageSize:'20,30,40'},
    showTfoot: true,
    fullGrid: false,
    toolbarCustom: function(){
    	var html = '';
    	html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue" onclick="addRole()"><i class="fa fa-plus"></i> 添加</button></div>';
	    html += '<div class="btn-group" role="group"><button type="button" class="btn btn-green" onclick="refreshRoleDataGrid()"><i class="fa fa-refresh"></i> 刷新</button></div>';
	    return html;
    }
});

try {
	roleDataGrid.data('bjui.datagrid').colLock(0, true);
} catch (e) {}

function addRole() {
	$('#edit-role-dialog').dialog({
		id:'add-role-dialog', 
		url:'role/add.do', 
		maxable: false,
		resizable:false,
		mask: true,
		width: 850,
		height: 250,
		onLoad: function($dialog){
			setEditRoleBtnEvent($dialog, true);
		},
		title:'添加角色'
	});
}

function setPermission(_this) {
	var roleIndex = $(_this).closest("tr").index();
	var data = roleDataGrid.data('bjui.datagrid').getRowData(roleIndex);
	$('#set-permission-dialog').dialog({
		id:'set-role-permission-dialog', 
		url:'role/setPermission.do?roleSn='+data.roleSn, 
		maxable: false,
		resizable:false,
		mask: true,
		width: 920,
		height: 600,
		onLoad: function($dialog){
			
		},
		title:'设置权限-' + data.roleName
	});
}

function editRole(_this) {
	var roleIndex = $(_this).closest("tr").index();
	var data = roleDataGrid.data('bjui.datagrid').getRowData(roleIndex);
	$('#edit-role-dialog').dialog({
		id:'edit-role-dialog', 
		url:'role/edit.do', 
		maxable: false,
		resizable:false,
		mask: true,
		width: 850,
		height: 250,
		onLoad: function($dialog){
			setEditRoleBtnEvent($dialog, true, roleIndex);
			getJsonData2Form('role/getRole.do', 'roleSn='+data.roleSn, $('#role_form'), null);
		},
		title:'编辑角色'
	});
}

function delRole(_this) {
	var roleIndex = $(_this).closest("tr").index();
	var rowData = roleDataGrid.data('bjui.datagrid').getRowData(roleIndex);
	roleDataGrid.alertmsg('confirm', '确定删除当前数据？', {
		okName:'确定', 
		cancelName:'取消', 
		title:'提示信息',
		okCall : function(){
			var url = "role/del.do?roleSn="+rowData.roleSn;
			var data = null;
			var successCallBack = function(result){
				refreshRoleDataGrid();
			}
			var failCallBack = null;
			var errorCallBack = null;
			myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
       	}
	});
}

function setEditRoleBtnEvent($dialog, isAdd, trIdx) {
	var $save, $cancel;
	$save = $dialog.find('.save');
	$cancel = $dialog.find('.cancel');

	$save.click(function(){
		$('#role_form').isValid(function(v) {
			if(v){
				var url = 'role/save.do';
				var data = $('#role_form').serialize()+"&addFlag="+isAdd;
				var successCallBack = function(result){
					$dialog.dialog('closeCurrent');
					refreshRoleDataGrid();
				}
				var failCallBack = null;
				var errorCallBack = null;
				myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
			}
		});
	});

	$cancel.click(function(){
		$dialog.dialog('closeCurrent');
	});
}

function refreshRoleDataGrid() {
	roleDataGrid.datagrid("refresh");
}
</script>
<div class="bjui-pageContent" id="role-index-pagecontent">
    <div style="padding:0px; height:100%; width:100%;">
        <table id="role-datagrid-json" data-width="100%" data-height="100%" class="table table-bordered">
        </table>
    </div>
</div>
<div id="edit-role-dialog" style="display: none;">
</div>
<div id="set-permission-dialog" style="display: none;">
</div>